<template>
   <div id="energy" class="padding-inner">
      <div class="energy-box flex">
         <div class="left m-panel-1">
            <Panel panelTitle="能效指针图">
               <div id="pointer_2_1" style="width: 100%; height: 200px;" class="bg-color"></div>
            </Panel>
         </div>
         <div class="right">
            <Panel panelTitle="近30天逐日制冷（热）量和消耗">
               <div id="curve_2_1" style="width: 100%; height: 200px;" class="bg-color"></div>
            </Panel>
         </div>
      </div>

      <div class="energy-box flex">
         <div class="left m-panel-1">
            <Panel panelTitle="能效指针图">
               <div id="pointer_2_2" style="width: 100%; height: 200px;" class="bg-color"></div>
            </Panel>
         </div>
         <div class="right">
            <Panel panelTitle="近120天逐日制冷（热）量和消耗">
               <div id="curve_2_2" style="width: 100%; height: 200px;" class="bg-color"></div>
            </Panel>
         </div>
      </div>
   </div>
</template>
  
<script>
import Panel from '@/components/base/Panel.vue';
export default ({
   name: 'Energy',
   components: {
      Panel,
   },
   data() {
      return {
      }
   },
   mounted() {
      this.drawPointer()
      this.drawCurve()

   },
   methods: {
      drawPointer() {
         // 基于准备好的dom，初始化echarts实例
         let myChart = this.$echarts.init(document.getElementById('pointer_2_1'))
         let myChart2 = this.$echarts.init(document.getElementById('pointer_2_2'))

         // 绘制图表
         // 指定图表的配置项和数据
         let option = {
            series: [
               {
                  type: 'gauge',
                  axisLine: {
                     lineStyle: {
                        width: 20,
                        color: [
                           [0.3, '#67e0e3'],
                           [0.7, '#37a2da'],
                           [1, '#fd666d']
                        ]
                     }
                  },
                  pointer: {
                     itemStyle: {
                        color: 'inherit'
                     }
                  },
                  axisTick: {
                     distance: -30,
                     length: 15,
                     lineStyle: {
                        color: '#e3f2fe',
                        width: 2
                     }
                  },
                  splitLine: {
                     distance: -20,
                     length: 20,
                     lineStyle: {
                        color: '#e3f2fe',
                        width: 3
                     }
                  },
                  axisLabel: {
                     color: 'inherit',
                     distance: 26,
                     fontSize: 7
                  },
                  detail: {
                     valueAnimation: true,
                     formatter: '{value} kw/h',
                     color: 'inherit',
                     fontSize: 7
                  },
                  data: [
                     {
                        value: 70
                     }
                  ]
               }
            ]
         };
         setInterval(function () {
            myChart.setOption({
               series: [
                  {
                     data: [
                        {
                           value: +(Math.random() * 100).toFixed(2)
                        }
                     ]
                  }
               ]
            });
         }, 2000);


         // 使用刚指定的配置项和数据显示图表。
         myChart.setOption(option);
         myChart2.setOption(option);

      },
      drawCurve() {
         // 基于准备好的dom，初始化echarts实例
         let myChart = this.$echarts.init(document.getElementById('curve_2_1'))
         let myChart2 = this.$echarts.init(document.getElementById('curve_2_2'))

         var option = {
            title: {
               text: '',
               color: '#e3f2fefff'
            },
            tooltip: {
               trigger: 'axis',
               axisPointer: {
                  type: 'cross',
                  label: {
                     backgroundColor: '#3b72ee'
                  }
               }
            },
            legend: {
               data: ['功耗', '制冷']
            },
            toolbox: {
               feature: {
                  saveAsImage: {}
               }
            },
            grid: {
               left: '3%',
               right: '4%',
               bottom: '3%',
               containLabel: true
            },
            xAxis: [
               {
                  type: 'category',
                  boundaryGap: false,
                  data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30']

               }
            ],
            yAxis: [
               {
                  type: 'value'
               }
            ],
            series: [

               {
                  name: '功耗',
                  type: 'line',

                  data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310]
               },
               {
                  name: '制冷',
                  type: 'line',

                  data: [150, 100, 151, 154, 190, 310, 210, 150, 100, 151, 154, 190, 310, 210, 150, 100, 151, 154, 190, 310, 210]
               }
            ]
         };

         // 使用刚指定的配置项和数据显示图表。
         myChart.setOption(option);
         myChart2.setOption(option);

      }
   }
})
</script>
  
<style scoped lang="less" >
  .energy-box {
    
    .left {
      
      width: 30%;
      // height: 230px;
      // background-color: red;
      
    }

    .right {
      // background-color: #e3f2fe;
      width: 70%;
    }
  }

</style>